import React, { Component } from 'react';
import { Alert,Text,Button, View,StyleSheet,TextInput } from 'react-native';
import Bt1 from './button/bt'
import FlatListBasics from './LongList'

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { isShowingText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
        if (!this.state.isShowingText){
            this.setState({
                isShowingText:true
            })
        }else{
            this.setState({
                isShowingText:false
            })
        }
//      this.setState(previousState => {
//        return { isShowingText: !previousState.isShowingText };
//      });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      <Text>{this.props.text}</Text>
    );
  }
}

export default class BlinkApp extends Component {

  constructor(props) {
    super(props);
    this.state = {
        isShowingText: true,
        s1: [],
        text:""
    };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
        if (!this.state.isShowingText){
            this.setState({
                s1:[styles.item,styles.flex2],
                isShowingText:true
            })
        }else{
            this.setState({
                s1:[styles.item,styles.flex1],
                isShowingText:false
            })
        }
//      this.setState(previousState => {
//        return { isShowingText: !previousState.isShowingText };
//      });
    }, 2000);
  }

  // 按钮点击事件
    _onPressButton =()=> {
      Alert.alert('You tapped the button!'+this.state.text)
    }
    _onChangeText = (text)=>{
        this.setState({text:text})
    }

  render() {
    return (
        <View style={styles.container}>
        {/* 添加多个样式 */}
                <View style={styles.flex1,{flexDirection:'row'}}>
                    <View style={[styles.item,styles.flex1]}>
                            <Blink text='I love to blink' />
                    </View>
                    {/* 动态控制样式 */}
                    <View style={this.state.s1}>
                            <Blink text='Yes blinking is so great' />
                    </View>
                    <View style={[styles.item,styles.flex1]}>
                            <Blink text='Why did they ever take this out of HTML' />
                    </View>
                </View>
                    {/* 文本输入 存入 this.state */}
             <View style={[styles.flex1,styles.center,{flexDirection:'column'}]}>
             <View>
                <Text> 文本输入 存入 this.state </Text>
             </View>
                 <View style={[styles.flex1,styles.border]}>
                    <TextInput

                      placeholder="Type here to translate!"
                      onChangeText={this._onChangeText}
                    />
                 </View>

                 <View style={[styles.flex1,styles.border,{width:100}]}>

                       <Text  style={{ fontSize: 14}}>
                        {this.state.text}
                       </Text>
                 </View>
            </View>


                    {/* 按钮 */}
             <View style={[styles.flex1,styles.center,{flexDirection:'column'}]}>
                     <View styles={styles.flex1}>
                        <Text> 按钮 </Text>
                     </View>

                      <View style={[styles.flex2,{flexDirection:'row'}]}>
                         <View style={[styles.buttonContainer,styles.flex1]}>
                           <Button
                             onPress={this._onPressButton}
                             title="Press Me"
                           />
                         </View>

                         <View style={[styles.buttonContainer,styles.flex1]}>
                                <Bt1 />
                          </View>
                        </View>
             </View>

             <View style={[styles.flex1,styles.center,{flexDirection:'column'}]}>
                     <View styles={styles.flex1}>
                        <Text> 长列表 </Text>
                     </View>

                      <View style={[styles.flex2,{flexDirection:'row'}]}>

                         <View style={[styles.flex1]}>
                                <FlatListBasics />
                          </View>
                        </View>
             </View>
        </View>
    );
  }
}

var styles = StyleSheet.create({
    container:{
        flex:1,
        borderWidth:1,
        borderColor:'red',
//        flexDirection:'row', column
    },
     item:{
        height:80,
        borderColor:'blue',
        borderWidth:1,
        },
    flex2:{
        flex:2
    },
    flex1:{
        flex:1
    },
    center:{
        justifyContent:'center',
        alignItems:'center',
    },
    border:{
        borderWidth:1,
        borderColor:'skyblue',
    },
      buttonContainer: {
        margin: 20
      },
})